<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H5资源调试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .debug-section {
            margin: 20px 0;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
        .btn {
            display: inline-block;
            padding: 8px 16px;
            background-color: #007bff;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            margin: 5px;
        }
        .btn:hover {
            background-color: #0056b3;
        }
        .btn-danger {
            background-color: #dc3545;
        }
        .btn-danger:hover {
            background-color: #c82333;
        }
        .status {
            padding: 10px;
            margin: 10px 0;
            border-radius: 5px;
            font-weight: bold;
        }
        .success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .warning {
            background-color: #fff3cd;
            color: #856404;
            border: 1px solid #ffeaa7;
        }
        .code-block {
            background-color: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 15px;
            font-family: monospace;
            white-space: pre-wrap;
            overflow-x: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>H5资源调试页面</h1>
        
        <div class="debug-section">
            <h3>🔍 问题分析</h3>
            <p>您遇到的错误：<code>http://localhost:7081/static/h5/css/app.css</code> 返回404</p>
            <p>但是H5项目的实际文件结构中并没有 <code>css/app.css</code> 这个文件</p>
        </div>
        
        <div class="debug-section">
            <h3>📁 实际文件结构</h3>
            <div class="code-block">hhm/static/h5/
├── index.html
├── assets/
│   ├── uni.95f8bd5d.css
│   ├── index.DOVtpg04.css
│   ├── index.DKt_-jSc.js
│   └── ... (其他资源文件)
└── static/
    ├── css/
    │   ├── common.scss
    │   └── mixin.scss
    └── images/
        └── ... (图片文件)</div>
        </div>
        
        <div class="debug-section">
            <h3>✅ 正确的资源路径</h3>
            <p>H5的index.html中引用的正确路径：</p>
            <div class="code-block">&lt;link rel="stylesheet" href="/static/h5/assets/uni.95f8bd5d.css"&gt;
&lt;link rel="stylesheet" crossorigin href="/static/h5/assets/index.DOVtpg04.css"&gt;
&lt;script type="module" crossorigin src="/static/h5/assets/index.DKt_-jSc.js"&gt;&lt;/script&gt;</div>
        </div>
        
        <div class="debug-section">
            <h3>❌ 错误的资源路径</h3>
            <p>您遇到的错误路径：<code>/static/h5/css/app.css</code></p>
            <p>这个路径在H5项目中并不存在！</p>
        </div>
        
        <div class="debug-section">
            <h3>🔧 可能的原因</h3>
            <ol>
                <li><strong>浏览器缓存问题</strong> - 浏览器可能缓存了旧的资源引用</li>
                <li><strong>H5项目动态加载</strong> - UniApp可能在运行时动态加载了其他资源</li>
                <li><strong>构建配置问题</strong> - H5项目构建时可能生成了错误的路径</li>
                <li><strong>其他配置文件</strong> - 可能有其他配置文件引用了错误的路径</li>
            </ol>
        </div>
        
        <div class="debug-section">
            <h3>🧪 测试步骤</h3>
            <ol>
                <li>清除浏览器缓存（Ctrl+Shift+Delete）</li>
                <li>访问 <a href="/h5" target="_blank" class="btn">H5应用</a></li>
                <li>打开浏览器开发者工具（F12）</li>
                <li>查看Network标签，找到404错误的请求</li>
                <li>检查Console标签，查看JavaScript错误</li>
            </ol>
        </div>
        
        <div class="debug-section">
            <h3>🔍 资源访问测试</h3>
            <p>测试正确的资源路径：</p>
            <a href="/static/h5/assets/uni.95f8bd5d.css" class="btn" target="_blank">测试 uni.css</a>
            <a href="/static/h5/assets/index.DOVtpg04.css" class="btn" target="_blank">测试 index.css</a>
            <a href="/static/h5/assets/index.DKt_-jSc.js" class="btn" target="_blank">测试 index.js</a>
            
            <p>测试错误的资源路径（应该返回404）：</p>
            <a href="/static/h5/css/app.css" class="btn btn-danger" target="_blank">测试 app.css (应该404)</a>
        </div>
        
        <div class="debug-section">
            <h3>💡 解决方案</h3>
            <div class="status success">
                ✅ H5Controller已修改为直接读取H5的index.html文件
            </div>
            <div class="status success">
                ✅ 静态资源路径配置正确
            </div>
            <div class="status warning">
                ⚠️ 如果仍有问题，可能需要重新构建H5项目
            </div>
        </div>
        
        <div class="debug-section">
            <h3>🔄 重新构建H5项目</h3>
            <p>如果问题持续存在，可以尝试重新构建H5项目：</p>
            <div class="code-block"># 进入H5项目目录
cd hhm_h5

# Windows用户
build.bat

# Linux/Mac用户
chmod +x build.sh
./build.sh</div>
        </div>
        
        <div class="debug-section">
            <h3>📞 需要更多信息</h3>
            <p>如果问题仍然存在，请提供：</p>
            <ul>
                <li>浏览器开发者工具Network标签的截图</li>
                <li>具体的404错误URL列表</li>
                <li>H5应用加载时的控制台错误信息</li>
                <li>H5应用是否完全无法加载，还是部分功能异常</li>
            </ul>
        </div>
    </div>
    
    <script>
        // 添加一些调试信息
        console.log('H5资源调试页面已加载');
        console.log('当前URL:', window.location.href);
        console.log('当前时间:', new Date().toISOString());
        
        // 测试资源加载
        function testResource(url) {
            const link = document.createElement('link');
            link.rel = 'stylesheet';
            link.href = url;
            link.onload = () => console.log('✅ 资源加载成功:', url);
            link.onerror = () => console.log('❌ 资源加载失败:', url);
            document.head.appendChild(link);
        }
        
        // 测试正确的资源路径
        testResource('/static/h5/assets/uni.95f8bd5d.css');
        testResource('/static/h5/assets/index.DOVtpg04.css');
        
        // 测试错误的资源路径
        testResource('/static/h5/css/app.css');
    </script>
</body>
</html>
